<template>
  <el-backtop class="back-to-top" :right="100" :bottom="100" target=".el-main">
    <div class="box">UP
      <!-- <img :src="url" alt=""> -->
    </div>
  </el-backtop>
</template>

<script setup>
const url = require('@/assets/svg/back_to_top.svg')
</script>

<style lang='less' scoped>
.back-to-top {
  width: 50px;
  height: 50px;
  position: relative;
  .box {
    position: fixed;
    bottom: 100px;
    right: 60px;
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    color: #1989fa;
    font-size: 18px;
    letter-spacing: 1px;
    box-shadow: 0 1px 7px rgba(30, 71, 229, .25);
    transition: all 0.2s;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .box:hover {
    cursor: pointer;
    // color: rgba(255, 0, 0, 0.792);
    box-shadow: 0 1px 10px #75bdf18a;

  }
}
</style>